Testing new template....

Hypothetical rewrite of #8800

Summary #

This PR adds high contrast mode color values for data visualization and severity color tokens.

Changes

• separates colors.vis and colors.severity by color mode (enables overriding token values based on color mode)
• adds high contrast mode token values for colors.vis (excludes AsText tokens as they are updated [Visual Refresh][Theme] Update dataVis text color tokens #8793 separately) and colors.severity

Accessibility check (Required if applicable) #

Each color in this palette was checked against these background colors (some hypothetical list of colors here) with a contrast ratio checker plugin for the Chrome Browser.

Changelog context (Required if changelog included)

Why are we making this change? #

We made this change because our current data visualization and severity colors did not meet 3:1 contrast ratios in light mode. This change solves that by adding high-contrast variants to the data visualization and severity color palettes, but ONLY high-contrast mode is enabled.

Related EUI issues or initiatives:

• Closes [HCM] Implement high contrast dataVis colors #8632
• Relates to the High-Contrast mode Beta initiative: [BETA] High Contrast Mode #8567
• Part of the Visual Refresh initiative: [Visual Refresh] Update of euiColorVisAsText to solve accessibility concern #8589

Related issues or initiatives from other Elastic products (Kibana, Cloud, etc.):

• Related to a larger initiative in Kibana to create a high-contrast data vis color palette: [Colors] High contrast color palette kibana#196911

API Changes #

Color tokens (when light mode and high contrast mode are enabled):
- colors.vis.euiColorVis0 #16C5C0 -> #065B58
- colors.vis.euiColorVis1	#A6EDEA -> #009E99
- colors.vis.euiColorVis2	#61A2FF -> #154399
- colors.vis.euiColorVis3	#BFDBFF -> #2476F0
- colors.vis.euiColorVis4	#EE72A6 -> #831652
- colors.vis.euiColorVis5	#FFC7DB -> #D13680
- colors.vis.euiColorVis6	#F6726A -> #7F1F27
- colors.vis.euiColorVis7	#FFC9C2 -> #DA3737
- colors.vis.euiColorVis8	#EAAE01 -> #6A4906
- colors.vis.euiColorVis9	#FCD883 -> #AD7E00

- colors.severity.unknown	#E3E8F2 -> #798EAF
- colors.severity.neutral	#B5E5F2 -> #0dA1C9
- colors.severity.success	#24C292 -> #00996B
- colors.severity.warning	#FCD883 -> #AD7E00
- colors.severity.risk	#FF995E -> #ED6723
- colors.severity.danger	#EE4C48 -> #EE4C48

Functional changes #

This PR has no functional changes that users should be aware of

Visual changes #

Since the color tokens have been changed, that means that existing usages of the colors tokens list above will visually change for users when light mode and high-contrast mode are enabled.

Doc updates (How to contribute docs) #

• Doc updates were made and the production link to them will be here:
  • Data Vis colors
  • Severity colors
  • 3:1 compliance for color palettes
• Docs were updated separately here: {Provide a link}
• This update does not require doc updates, the most relevant existing docs are here: {Provide a link}

EUI library Figma updates #

• Updates were already made to Figma, they can be found here: <TODO: I actually don't know how to tell whether or not these changes were made in Figma to even provide a link below>
• Updates will be made to Figma, a link to the issue to capture that work is here: {Provide a link}
• This behavior does not need to be reflected in Figma. The most relevant Figma file is here: {Provide a link}

(Figma issues can be filed : here (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

Screenshots #

high contrast mode	LIGHT	DARK
false
true / 'preferred'
'forced'

Reproduction instructions #

Navigate to the Data Vis colors or Severity colors pages and use the Light / Dark mode and High-Contrast mode toggles in the top right-hand corner of the docs site to toggle on light mode and high-contrast mode, and observe that the colors in both of these sections have changed.

Impact assessment #

• 🔴 This is a breaking change. I've added the breaking change label to this issue and the migration instructions are as follows:
• 🟡 This change is not technically breaking, but could break tests, affect code that applies custom css, or requires extra testing or attention:
  • While no action is required by consumers, note that the color values have changed, so it is worth testing your usage to ensure everything still looks as expected.
• 🟢 No impact to existing usage

Scope of impact in Elastic products:

• Approximately how many relevant usages are there in Kibana or other Elastic products?:
  • There are 344 references to euiColorVis colors in Kibana.
  • There are 35 references to euiColorVis colors in Cloud UI.

Rollout / adoption #

No rollout required.

Note: While this change updates all data vis colors and severity colors in EUI to have a 3:1 ratio, it will not immediately affect Kibana, as those colors come from elastic-charts. The elastic-charts team will need to make those changes separately.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.